/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, InputLine, Input, LineColumn,} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, SelectInput, useItemInputControl,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet, } from "../../../common/tool";

interface Props extends InternalItemProps {
    label?: string;
    titles?: any[];
}

//模型：主要受压元部件检查
export const item宏观检验o = [
    ['锅筒', {t: '锅 筒', }, ],
    ['管板', {t: '管 板',},],
    ['拉撑', {t: '拉撑件',},],
    ['炉胆', {t: '炉 胆',},],
    ['回燃', {t: '回燃室',},],
    ['集箱', {t: '集 箱',}],
    ['烟管', {t: '烟 管', }],
    ['升管', {t: '上升管'}],
    ['降管', {t: '下降管'}],
    ['盘形', {t: '盘形管'}],
        //编辑器拆分两个区域
    ['门形', {t: '门形管'}],
    ['顶棚', {t: '顶棚管'}],
    ['对流', {t: '对流管'}],
    ['进液', {t: '进液管', }  ],
    ['出液', {t: '出液(气)管'}],
    ['手孔', {t: '人手孔圈'}],
      //允许添加的4个行的增加项目：需要额外输入名称的： 不能设置t:‘’
    ['部件1', {t: undefined } ],
    ['部件2', {t: undefined } ],
    ['部件3', {t: undefined } ],
    ['部件4', {t: undefined } ]
];

export const itemA元件上: string[] = [ ];
item宏观检验o.forEach(([name, title, initIsp], i: number) => {
    if(i>=10)    return;
    itemA元件上.push(name as string);
});
export const 检查结果选=["√","○","－","×"];
export const 元件检查项目=[['裂纹','l'],['起槽','q'],['过热','g'],['变形','b'],['泄漏','x'],['腐蚀','f'],['磨损','m'],['积碳','s']];
/**内部检验报告（附页）： 上半部分 主要受压元部件检查
 * */
export const MetacomponM =
React.forwardRef((
    {children, show, alone = true, redId, nestMd, label, titles}: Props, ref
) => {
    const [getInpFilter] = useMeasureInpFilter(null, itemA元件上,);
    const {inp, setInp} = useItemInputControl({ref});
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                            nestMd={nestMd} alone={alone} label={label!}>
             <Text variant="h5">{label}：</Text>
             { item宏观检验o.map(([name,conf,]: any, i:number) => {
                if(i>=10)    return null;
                const {t: title,}=conf;
                return (<React.Fragment key={i}>
                    元部件{1+i} -<Text variant="h5" css={{display: 'inline-flex'}} >{title}</Text>：
                    <div css={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
                        { 元件检查项目.map(([ititle,subf], m:number) => {
                            return <div key={m} css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                                {ititle}
                                <SelectInput value={ inp?.[name]?.[subf] ||''}  list={检查结果选}  nMinW
                                         style={{display: 'inline-flex', width: '5rem'}}
                                     onChange={e => objNestSet(name,subf,e.currentTarget.value||undefined, inp, setInp) }/>
                            </div>
                        })}
                    </div>
                </React.Fragment>);
             })}
        注：上述检查项目表中，符合要求打“√”，基本符合要求打“○”，不符合要求打“×”，无此项划去“—”；
    </InspectRecordLayout>;
});

//多4个可自定义的名字项目
export const itemA元件下: string[] = [];
item宏观检验o.forEach(([name, title, initIsp], i: number) => {
    if(i>=10)
        itemA元件下.push(name as string);
});
/**内部检验报告（附页）： 下 半部分的 主要受压元部件检查
 * */
export const MetacomponOther =
React.forwardRef((
    {children, show, alone = true, redId, nestMd, label, titles}: Props, ref
) => {
    const [getInpFilter] = useMeasureInpFilter(null, itemA元件下,);
    const {inp, setInp} = useItemInputControl({ref});
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        {/*固定方式增加一行的*/}
        <Text variant="h5">受压元部件检查可增加项目名称（最后4项）：</Text>
        <LineColumn>
            { (new Array(4).fill(null)).map((_,x:number) => {
                return <InputLine key={x} label={`第${x+17}项名称`}>
                    <Input value={(inp?.[`部件${x+1}`]?.t) || ''}
                           onChange={e => objNestSet(`部件${x+1}`, 't', e.currentTarget.value || undefined, inp, setInp)}/>
                </InputLine>;
            })}
        </LineColumn>
        {item宏观检验o.map(([name, conf,]: any, i: number) => {
            if (i < 10) return null;
            const {t: title,} = conf;
            return (<React.Fragment key={i}>
                元部件{i + 1} -<Text variant="h5"
                                     css={{display: 'inline-flex'}}>{i < 16 ? title : inp?.[name]?.t}</Text>：
                <div css={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
                    {元件检查项目.map(([ititle, subf], m: number) => {
                        return <div key={m}
                                    css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            {ititle}
                            <SelectInput value={inp?.[name]?.[subf] || ''} list={检查结果选} nMinW
                                         style={{display: 'inline-flex', width: '5rem'}}
                                         onChange={e => objNestSet(name, subf, e.currentTarget.value || undefined, inp, setInp)}/>
                        </div>
                    })}
                </div>
            </React.Fragment>);
        })}
        注：上述检查项目表中，符合要求打“√”，基本符合要求打“○”，不符合要求打“×”，无此项划去“—”；
    </InspectRecordLayout>;
});

//最简化的配置 [名字，标题] ; 分项目固定个数的。 4 *5 矩阵的；
export const 附页其它项目=[
    ['炉排','炉排'],['阀门','阀门'],['膨罐','膨胀罐'], ['储罐','储罐'],
    ['燃烧','燃烧器'],['管道','管道'],['冷凝','冷凝液罐'],['滤器','过滤器'],
    ['样冷','取样冷却器'], ['引风','鼓引风设备'],['闪蒸','闪蒸罐'], ['气离','油气分离器'],
    ['循泵','循环泵'], ['炉墙','炉顶炉墙'],['保温','保温层'],  ['分气','分气(油)缸'],
    //最后多出的两个格子：存储方案： 把名字独立存储'多出1n','多出2n',; 更方便点的。而不是用对象二级嵌套存储的： '多出1':{t:"" , v:''}模式。
    ['焦垢','焦垢'], ['其它','其它'],  ['多出1',''],  ['多出2','']
];
export const itemA元件它: string[] = ['多出1n','多出2n'];
for(let [name,desc] of 附页其它项目){
    itemA元件它.push(name);
}
/**内部检验报告（附页）： 其他检验项目
 * */
export const OtherTestItems =
    React.forwardRef((
        {children, show, alone = true, redId, nestMd, label, titles}: Props, ref
    ) => {
        const [getInpFilter] = useMeasureInpFilter(null, itemA元件它,);
        const {inp, setInp} = useItemInputControl({ref});
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            <Text variant="h5">其他检验项目-可增加项目名称（第19项）：</Text>
            <InputLine label={'第19项名称'}>
                <Input value={inp?.多出1n || ''}
                       onChange={e => setInp({...inp, 多出1n: e.currentTarget.value || undefined})}/>
            </InputLine>
            <InputLine label={'第20项名称'}>
                <Input value={inp?.多出2n || ''}
                       onChange={e => setInp({...inp, 多出2n: e.currentTarget.value || undefined})}/>
            </InputLine>
            其他检验项目：<br/>
            <br/>
            <div css={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
                {附页其它项目.map(([name, desc]: any, i: number) => {
                    const descN = 18 === i ? inp?.多出1n : 19 === i ? inp?.多出2n : desc;
                    return (
                        <div key={i} css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            <Text variant="h5" css={{display: 'inline-flex'}}>{descN}</Text>：
                            <SelectInput value={inp?.[name] || ''} list={检查结果选} nMinW={true}
                                         style={{display: 'inline-flex', width: '5rem'}}
                                         onChange={e => setInp({...inp, [name]: e.currentTarget.value || undefined})}/>
                        </div>
                    );
                })}
            </div>
            <br/>
            注：上述检查项目表中，符合要求打“√”，基本符合要求打“○”，不符合要求打“×”，无此项划去“—”；
        </InspectRecordLayout>;
    });

